<template>
  <div class="add">
      <el-breadcrumb separator="/" class="add_box">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>打卡方案</el-breadcrumb-item>
        <el-breadcrumb-item>新增打卡方案</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="top">
        基本设置
      </div>

      <div class="Basic_Settings" >
        <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px">
            <div class="active_box" >
                    <el-form-item label="工作日历名称:"  prop="name">
                    <el-input  v-model="form.name" placeholder="请输入方案名称（最多30个汉字或字母）"/>
                    </el-form-item>
                    <el-form-item label="设为默认:">
                    <el-switch v-model="form.delivery1" />
                    </el-form-item>
            </div>   

            <el-form-item label="考勤方式:" >
                <el-radio-group v-model="form.resource" >
                    <el-radio label="地点" :default-value="true"  @change="changeitem(form.resource)"/>
                    <el-radio label="WiFi" @change="changeitem(form.resource)"/>
                    <el-radio label="地点&WiFi" @change="changeitem(form.resource)"/>
                </el-radio-group>
            </el-form-item>
            <!-- 地址考勤打卡 -->
            <div class="dkadd" v-show="changes1">
              <div class="dakabox">打卡地址</div>

              <el-button type="primary" @click="onSubmitAdd()">添加</el-button>
                <!-- 地址考勤打卡表格 -->
              <el-table :data="tableData1" border style="width:800px;margin-top:20px">
                <el-table-column prop="DKDDname" label="地点名称" width="180" />
                <el-table-column prop="DKDDcity" label="具体地址" width="180" />
                <el-table-column prop="DKDDrange" label="可打卡范围" />
                <el-table-column label="操作" align="center">
                      <template #default="scope">
                        <el-button @click="handleDelete1(scope.row.id)" type="danger"
                          text='danger'>删除</el-button>
                      </template>
                </el-table-column>
              </el-table></div>
              <!-- 地点----弹出框组件 -->
              <el-dialog class="box1" v-model="dialogFormVisible" title="添加地址考勤打卡">
                  <el-form :model="form1">
                    <el-form-item label="地点名称:" style="width:400px">
                      <el-input v-model="form1.DKDDname1" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="具体地址:" style="width:400px">
                      <el-input v-model="form1.DKDDcity1" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="可打卡范围:" style="width:400px">
                      <el-input v-model="form1.DKDDrange1" autocomplete="off"/>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取消</el-button>
                      <el-button type="primary" @click="DKDD_add(form1.DKDDname1,form1.DKDDcity1,form1.DKDDrange1)">
                        确认
                      </el-button>
                    </span>
                  </template>
              </el-dialog>
            
              <!-- WiFi----弹出框组件 -->
              <el-dialog class="box1" v-model="dialogFormVisible1" title="添加WiFi考勤打卡">
                  <el-form :model="form2">
                    <el-form-item label="WiFi名称:" style="width:400px">
                      <el-input v-model="form2.WiFiname1" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="MAC地址:" style="width:400px">
                      <el-input v-model="form2.WiFicity1" autocomplete="off"/>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogFormVisible1 = false">取消</el-button>
                      <el-button type="primary" @click="DKDD_addWiFis(form2.WiFiname1,form2.WiFicity1)">
                        确认
                      </el-button>
                    </span>
                  </template>
              </el-dialog>


            <!-- WiFi考勤打卡 -->
            <div class="dkadd" v-show="changes2">
              <div class="dakabox">打卡WiFi</div>

              <el-button type="primary" @click="onSubmitAdd1()">添加</el-button>
            
              <el-table :data="tableData2" border style="width:800px;margin-top:20px">
                <el-table-column prop="WiFiname" label="WiFi名称" />
                <el-table-column prop="WiFicity" label="MAC地址" />
                <el-table-column label="操作" align="center">
                      <template #default="scope">
                        <el-button @click="handleDelete2(scope.row.id)" type="danger"
                          text= 'danger'>删除</el-button
                        >
                      </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 地址考勤打卡或WiFi考勤打卡 -->
            <div class="dkadd" v-show="changes3" >
              <div class="dakabox">打卡地址</div>

              <el-button type="primary" @click="onSubmitAdd()">添加</el-button>
            
              <el-table :data="tableData1" border style="width:800px;margin-top:20px">
                <el-table-column prop="DKDDname" label="地点名称" width="180" />
                <el-table-column prop="DKDDcity" label="具体地址" width="180" />
                <el-table-column prop="DKDDrange" label="可打卡范围" />
                <el-table-column label="操作" align="center">
                      <template #default="scope">
                        <el-button @click="handleDelete1(scope.row.id)" type="danger"
                          text= 'danger'>删除</el-button
                        >
                      </template>
                </el-table-column>
              </el-table>

              <div class="dakabox">打卡WiFi</div>

              <el-button type="primary" @click="onSubmitAdd1( )">添加</el-button>
            
              <el-table :data="tableData2" border style="width:800px;margin-top:20px">
               <el-table-column prop="WiFiname" label="WiFi名称"  />
                <el-table-column prop="WiFicity" label="MAC地址"  />
                <el-table-column label="操作" align="center">
                      <template #default="scope">
                        <el-button @click="handleDelete2(scope.row.id)" type="danger"
                          text= 'danger'>删除</el-button
                        >
                      </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="active_bottom">
                <el-form-item>
                <el-button @click="fund">返回</el-button>    
                <el-button type="primary" @click="onSubmit(form.name,form.resource)">保存</el-button>
                </el-form-item> 
            </div>
       </el-form>
      </div>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { onMounted, ref } from 'vue'
import * as service from "@/api/lei/lei";
// 表单校验时要定义：ruleFormRef
var ruleFormRef = ref( );
// 表单验证的数据
var rules = ref({
  name: [{ required: true, message: "请输入方案名称", trigger: "blur" }],
});
// 引入路由
import { useRouter } from "vue-router";
var $router = useRouter()
// 增加打卡方案所用的数据
const form = ref({
  name: '',
  region: '',
  delivery1: false,
  delivery2: false,
  type: [],
  resource: '地点',
})
// 返回按钮（返回打卡方案页面）
var fund =()=>{
    $router.push('/index/daka_plan')
}
// 保存按钮，发送添加请求
const onSubmit = async(DKname,DKway) => {
    //获取实时时间
    const currentDate1 = new Date().toLocaleDateString(); // 将字符串转换为日期格式
    const currentDate2 = new Date().toLocaleTimeString();
    var Dktime = `${currentDate1} ${currentDate2}`
    // 发请求先验证
ruleFormRef.value.validate(async(valid, fields) => {
    if (valid) {
      var res = await service.DKFS_add({DKname,DKway,Dktime})
              if (res.status===201) {
                  ElNotification({
                      title: "通知",
                      message: "打卡添加成功",
                      type: "success",
                      duration: 2000,
                    });
                  $router.push('/index/daka_plan')
              }
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 控制打卡方式的显示或隐藏
var changes1 = ref(true)
var changes2 = ref(false)
var changes3 = ref(false)
var changeitem =(name)=>{
    if (name==='地点') {
      changes1.value=true
      changes2.value=false
      changes3.value=false
    }else if(name==='WiFi'){
      changes2.value=true
      changes1.value=false
      changes3.value=false
    }else{
      changes3.value=true
      changes1.value=false
      changes2.value=false
    }
}
// 地点打卡渲染请求
var tableData1 = ref([]) 
onMounted(async()=>{
  var res = await service.DKDD()
  tableData1.value = res.data

})

var form1 = ref({
  DKDDname1: '',
  DKDDcity1: '',
  DKDDrange1: '',
})
// 设置弹出框是否弹出
var dialogFormVisible = ref(false)
// 地点打卡添加按钮
var onSubmitAdd = ( ) => {
    dialogFormVisible.value = true
}
// 点击确认按钮发送请求
var DKDD_add =async( DKDDname,DKDDcity,DKDDrange) =>{
await service.DKDD_add({DKDDname,DKDDcity,DKDDrange})
// 关闭弹框
dialogFormVisible.value = false
form1.value={}
ElNotification({
                title: "通知",
                message: "添加成功",
                type: "success",
                duration: 2000,
              });
//添加完之后重新渲染
var res = await service.DKDD()
tableData1.value = res.data
}
//点击删除，删除地点打卡信息
var handleDelete1=async(id)=>{
var res = await service.DKDD_delete({id})
ElNotification({
                      title: "通知",
                      message: "删除成功",
                      type: "success",
                      duration: 2000,
                    });
//删除完之后重新渲染
var res = await service.DKDD()
tableData1.value = res.data
}

// WiFi打卡渲染请求
var tableData2 = ref([]) 
onMounted(async()=>{
  var res = await service.DKDD_WiFi()
  tableData2.value = res.data

})
var form2 = ref({
  WiFiname1: '',
  WiFicity1: '',
})
// 设置弹出框是否弹出
var dialogFormVisible1 = ref(false)
// WiFi打卡添加按钮
var onSubmitAdd1 = ( ) => {
    dialogFormVisible1.value = true
}
// 点击确认按钮发送请求
var DKDD_addWiFis =async(WiFiname,WiFicity ) =>{
await service.DKDD_addWiFi({WiFiname,WiFicity})
// 关闭弹框
dialogFormVisible1.value = false
form2.value={}
ElNotification({
                title: "通知",
                message: "添加成功",
                type: "success",
                duration: 2000,
              });
//添加完之后重新渲染
var res = await service.DKDD_WiFi()
tableData2.value = res.data
}
//点击删除，删除地点打卡信息
var handleDelete2=async(id)=>{
var res = await service.DKDD_deleteWiFi({id})
ElNotification({
                title: "通知",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
//删除完之后重新渲染
var res = await service.DKDD_WiFi()
tableData2.value = res.data
}
</script>

<style scoped lang='scss'>
.add{
    height:500px ;
    .add_box{
        padding: 10px 15px;
        font-size: 14px;
    } 
    .top{
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        border-bottom: 1px solid #f5f5f5;
        padding:  10px 15px;
        font-weight: bold;
        }
    .Basic_Settings{
        width: 1100px;
        height: 500px;
        margin-top: 10px;
        box-sizing: border-box;
        .active_box{
            display: flex;
        }
        :deep(.el-input){
            width: 500px!important;
        }
        :deep(.el-input--suffix){
            width: 300px!important;
        }
        :deep(.el-form-item__label){
            width: 160px!important;
        }
        .active_bottom{
            margin-top: 15px;
        }
        .dkadd{
          padding-left:150px;
          margin-top: 20px;
         .dakabox{
            margin: 20px;
          }
        }
    }
}

</style>